<template>
  <div>
  <ul :id="'mtEditorTableMenu'+editIndex" class="mtEditorTableMenu" v-show="showMenu">
    <li @click.stop="showAddMenu = !showAddMenu, showOperatorMenu(0)">
      新增操作
      <i class="fa fa-chevron-right"></i>
      <transition name="slideout">
        <ul v-show="showAddMenu && selectedIndex == 0" class="addOperator">
          <li
            v-for="(item, key) in addMenus"
            :key="key"
            @click="addNewOne(key, $event),$emit('select')"
          >
            {{ item }}
          </li>
        </ul>
      </transition>
    </li>

    <li @click.stop="showDeleteMenu = !showDeleteMenu,showOperatorMenu(1)">
      删除操作
      <i class="fa fa-chevron-right"></i>
      <transition name="slideout">
        <ul class="deleteOperator" v-show="showDeleteMenu  && selectedIndex == 1">
          <li
            v-for="(item, key) in deleteMenus"
            :key="key"
            @click="deleteOne(key, $event),$emit('select')"
          >
            {{ item }}
          </li>
        </ul>
      </transition>
    </li>
    <li @click.stop="showEditStylePopUp = !showEditStylePopUp, showOperatorMenu(2)">
      样式调整
      <i class="fa fa-chevron-right"></i>
       <transition name="slideout">
        <ul class="editStyleOperator" v-show="showEditStylePopUp && selectedIndex==2">
          <li
            v-for="(item, key) in editStyleMenu"
            :key="key"
            @click="editStyle(key, $event),$emit('select')"
          >
            {{ item }}
          </li>
        </ul>
      </transition>
    </li>
    <!-- <li  @mouseover="showTrStyle=true" @mouseout="showTrStyle=false">表格底纹
                <transition name="slideout">
                <ul class="trStyle" v-show="showTrStyle">
                    <li>表格隔行变色
                        <ul class="colorUL" id="colorUL">
                            <li @click.stop="setOddColor">奇数行颜色 
                                <i class="fa fa-square" :style="{color:oddColorObj.color}" @click.stop="showPiker('odd')"></i>
                            </li>
                            <li @click.stop="setEvenColor">偶数行颜色 
                                <i class="fa fa-square" :style="{color:evenColorObject.color}" @click.stop="showPiker('even')"></i></li>
                            <colorpicker v-if="showColorPicker" :colorObj="colorObj" @changeColor="changeColor"/>
                        </ul>
                    </li>
                </ul>
                </transition>
            </li> -->
      
  </ul>
  </div>
</template>
<script>
// import colorpicker from '../colorpicker'
export default {
  props: ['showMenu', "tapTd", "tapTr", "tapIndex",'editIndex'],
  // components: {colorpicker},
  data () {
    return {
      addMenus: ['在前面添加一行', '在后面添加一行', '在前面添加一列', '在后面添加一列'],
      deleteMenus: ['删除当前行', '删除前一行', '删除后一行', '删除前一列', '删除后一列', '删除表格'],
      editStyleMenu: ['隐藏边框', '显示边框', '设置宽高'],
      showTrStyle: false,
      showDeleteMenu: false,
      showAddMenu: false,
      showColorPicker: false,
      showEditStylePopUp: false, // 是否显示调整表格样式的弹窗
      colorObj: {},
      oddColorObj: { color: 'lightgray' },
      evenColorObject: { color: 'lightcyan' },
      selectedIndex: '',
      myTapTr: '',
      
    }
  },
   watch: {
    oddColorObj: {
      //该方法名要保持一致
      handler () {
        this.setOddColor()
      },
      deep: true //一定要填写
    },
    evenColorObject: {
      handler () {
        this.setEvenColor();
      },
      deep: true
    },
    tapTr: {
      handler (value) {
        this.myTapTr = value
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
    this.$emit('tableMenuMounted')
  },
  methods: {
    showPiker (type) {
      this.showColorPicker = !this.showColorPicker;
      if (type === 'odd' && this.showColorPicker === true) {
        this.colorObj = this.oddColorObj;
      }
      if (type === 'even' && this.showColorPicker === true) {
        this.colorObj = this.evenColorObject;
      }
    },
    // 
    showOperatorMenu (index) {
      this.selectedIndex = index
    },
    addNewOne (index) {
      var tapTr = this.tapTr;
      var newTr = tapTr.cloneNode(true);
      switch (index) {
        case 0:
          Array.from(newTr.children).forEach((item) => {
            item.innerHTML = "";
          })
          tapTr.parentElement.insertBefore(newTr, tapTr)
          break;
        case 1:
          Array.from(newTr.children).forEach((item) => {
            item.innerHTML = "";
          })
          this.insertAfter(newTr, tapTr);
          break;
        case 2:
          // 在前面添加一列
          this.insertTd('before');
          break;
        case 3:
          this.insertTd('after');
          break;
      }
      this.$parent.select()
    },
    insertAfter (newEl, targetEl) {
      var parentEl = targetEl.parentNode;
      if (parentEl.lastChild == targetEl) {
        parentEl.appendChild(newEl);
      } else {
        parentEl.insertBefore(newEl, targetEl.nextSibling);
      }
    },
    insertTd (direction) {
      if (this.tapTr.parentElement.tagName == "TABLE") {
        var table = this.tapTr.parentElement;
        Array.from(table.children).forEach((item) => {
          var newTd = document.createElement("td");
          var children = Array.from(item.children);
          for (var i = 0; i < children.length; i++) {
            if (this.tapIndex == i) {
              var oldEle = children[i];
              if (direction === "before") {
                item.insertBefore(newTd, oldEle);
              } else {
                this.insertAfter(newTd, oldEle)
              }
              break;
            }

          }
        })
      }
    },
    // 删除操作
    deleteOne (index) {
      var table = this.tapTr.parentElement;
      switch (index) {
        case 0:
          if (!this.tapTr.previousElementSibling && !this.tapTr.nextElementSibling) {
            
            table.parentElement.removeChild(table);
          } else {
            this.tapTr.parentElement.removeChild(this.tapTr);
          }
          break;
        case 1:
          if (this.tapTr.previousElementSibling) {
            this.tapTr.parentElement.removeChild(this.tapTr.previousElementSibling);
          }
          break;
        case 2:
          if (this.tapTr.nextElementSibling) {
            this.tapTr.parentElement.removeChild(this.tapTr.nextElementSibling);
          }
          break;
        case 3:
          this.operator("before", 'deleteColumn');
          break;
        case 4:
          this.operator("after", 'deleteColumn');
          break;
        case 5:
          table.parentElement.removeChild(table);
          break;
      }
      this.$parent.select()
    },
    editStyle (index) {
      switch(index){
        case 0 : 
          this.setTdBorder('none');
          this.$parent.select()
          break;
        case 1: 
          this.setTdBorder('1px solid gray');
          this.$parent.select()
          break;
        case 2:
          console.log('设置宽高')
          this.$emit('setStyle')
          break;
      }
    },
    // 设置表格边框
    setTdBorder (style) {
      var table = this.tapTr.parentElement;
        let trs = table.children
        for (let i = 0; i < trs.length; i++) {
          let tds = trs[i].children;
          for (let j = 0; j < tds.length; j++) {
            let td = tds[j]
            td.style.border = style
          }
      }
    },
    operator (direction, type) {
      if (this.tapTr.parentElement.tagName == "TABLE") {
        var table = this.tapTr.parentElement;
        Array.from(table.children).forEach((item) => {
          var children = Array.from(item.children);
          for (var i = 0; i < children.length; i++) {
            if (type == "deleteColumn") {
              if (direction == "before") {
                if (i == this.tapIndex - 1) {
                  item.removeChild(children[i]);
                  break;
                }
              } else {
                if (i == this.tapIndex + 1) {
                  item.removeChild(children[i]);
                  break;
                }
              }
            }
          }
        })
      }
    },
    //设置奇数行颜色
    setOddColor () {
      var currentTableChilren = Array.from(this.tapTr.parentElement.children);
      for (var i = 0; i < currentTableChilren.length; i++) {
        if (i % 2 == 0) {
          var item = currentTableChilren[i];
          item.style.backgroundColor = this.oddColorObj.color;
        }
      }
    },
    //设置偶数行颜色
    setEvenColor () {
      var currentTableChilren = Array.from(this.tapTr.parentElement.children);
      for (var i = 0; i < currentTableChilren.length; i++) {
        if (i % 2 == 1) {
          var item = currentTableChilren[i];
          item.style.backgroundColor = this.evenColorObject.color;
        }
      }
    }
  }
}
</script>
<style scoped>
ul {
  list-style: none;
}
.mtEditorTableMenu {
  list-style: none;
  margin: 0;
  background: rgb(250, 250, 250);
  font-size: 12px;
  border: 1px solid lightgray;
  display: none;
}
.mtEditorTableMenu li {
  height: 30px;
  line-height: 30px;
  width: 100px;
  text-align: center;
}
.mtEditorTableMenu li:hover {
  background: lightcyan;
}
.deleteOperator,
.addOperator,
.trStyle,
.editStyleOperator,
.colorUL {
  margin-left: 100px;
  margin-top: -30px;
  border: 1px solid lightgray;
  width: 100px;
  background: white;
}
.colorUL {
  width: 200px;
}
#colorUL li {
  width: 200px;
}
.slideout-enter-active,
.slideout-leave-active {
  transition: all 0.5s;
}
.slideout-enter,
.slideout-leave-to {
  transform: translateX(-50px);
  opacity: 0;
}
.oddColor {
  color: lightgray;
}
.evenColor {
  color: lightcyan;
}
.editWidthHeightPopup {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.editWidthHeightPopup-content {
  width: 100px;
  height: 100px;
  background-color: white;
}
</style>
